import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Welcome from './components/Welcome';
import Widget from './components/Widget';
import ListView from './components/ListView';
import FormView from './components/FormView';
import FormMultiView from './components/FormMultiView';
import Calculator from "./components/Calculator";
import SplitPanel from "./components/SplitPanel";
import CustomTextInput from "./components/CustomTextInput";
import CounterButton from "./components/CounterButton";
import WordAdder from "./components/WordAdder";

class App extends Component {

    isShowDiv = true;

    constructor(props) {
        super(props);
        this.state = {
            showMeBaby: true
        };
        this.onButtonClick = this.onButtonClick.bind(this);
        this.onForward = this.onForward.bind(this);
    }

    onButtonClick() {
        this.setState(prevState => ({
            showMeBaby: !prevState.showMeBaby
        }));
    }

    onForward(event) {
        this.props.history.push('/new-page');
        event.preventDefault();
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">{this.props.title}</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
                <Widget value={1}/>
                <ListView/>
                <FormView/>
                <FormMultiView/>
                <Calculator/>
                <SplitPanel/>
                <CustomTextInput/>
                <CounterButton/>
                <WordAdder/>
                <Welcome name={'peter'}/>
                {this.isShowDiv && <Welcome name={'david'}/>}
                {this.state.showMeBaby && <Welcome name={'james'}/>}
                <button onClick={this.onButtonClick}>{this.state.showMeBaby ? '隐藏' : '显示'}</button>
                <button onClick={this.onForward}>Jump</button>
            </div>
        );
    }
}

export default App;
